<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>锚点定位与滚动定位效果</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
      color: #333;
      line-height: 1.6;
      min-height: 100vh;
      padding-top: 80px;
      overflow-x: hidden;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    header {
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(10px);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
    }

    .tabs-container {
      display: flex;
      justify-content: center;
      padding: 15px 0;
      flex-wrap: wrap;
    }

    .tab {
      padding: 12px 30px;
      margin: 0 5px 10px;
      background: rgba(255, 255, 255, 0.1);
      color: #ddd;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      font-size: 18px;
      font-weight: 600;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .tab i {
      margin-right: 10px;
      font-size: 20px;
    }

    .tab:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
    }

    .tab.active {
      background: linear-gradient(90deg, #ff416c, #ff4b2b);
      color: white;
      box-shadow: 0 5px 15px rgba(255, 75, 43, 0.4);
    }

    .tab::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 4px;
      background: #ff416c;
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .tab.active::after {
      width: 70%;
    }

    .section {
      min-height: 100vh;
      padding: 100px 50px;
      margin-bottom: 30px;
      background: rgba(255, 255, 255, 0.93);
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: linear-gradient(to bottom, #ff416c, #ff4b2b);
    }

    .section:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    }

    .section h2 {
      font-size: 42px;
      margin-bottom: 30px;
      color: #1a2a6c;
      display: flex;
      align-items: center;
    }

    .section h2 i {
      margin-right: 15px;
      background: linear-gradient(90deg, #ff416c, #ff4b2b);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .section p {
      font-size: 18px;
      margin-bottom: 20px;
      line-height: 1.8;
      color: #444;
    }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-top: 40px;
    }

    .card {
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-10px);
    }

    .card-img {
      height: 200px;
      background-size: cover;
      background-position: center;
    }

    .card-content {
      padding: 25px;
    }

    .card h3 {
      font-size: 22px;
      margin-bottom: 15px;
      color: #1a2a6c;
    }

    .indicator {
      position: fixed;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.7);
      border-radius: 30px;
      padding: 15px 10px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      z-index: 500;
    }

    .indicator-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .indicator-dot.active {
      background: #ff4b2b;
      transform: scale(1.4);
    }

    .indicator-dot:hover::after {
      content: attr(data-title);
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      white-space: nowrap;
      font-size: 12px;
    }

    .indicator-dot:hover {
      transform: scale(1.3);
      background: rgba(255, 75, 43, 0.8);
    }

    .info-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.85);
      color: white;
      padding: 15px;
      display: flex;
      justify-content: space-around;
      z-index: 1000;
      font-size: 16px;
    }

    .info-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .info-item span {
      color: #ff4b2b;
      font-weight: bold;
      margin-top: 5px;
      font-size: 18px;
    }

    .section:nth-child(1) .card-img {
      background: linear-gradient(45deg, #4facfe, #00f2fe);
    }

    .section:nth-child(2) .card-img {
      background: linear-gradient(45deg, #f6d365, #fda085);
    }

    .section:nth-child(3) .card-img {
      background: linear-gradient(45deg, #84fab0, #8fd3f4);
    }

    .section:nth-child(4) .card-img {
      background: linear-gradient(45deg, #a6c0fe, #f68084);
    }

    .section:nth-child(5) .card-img {
      background: linear-gradient(45deg, #d4fc79, #96e6a1);
    }

    .explanation {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 20px;
      margin: 30px 0;
      color: white;
    }

    .explanation h3 {
      color: #ff4b2b;
      margin-bottom: 15px;
    }

    .explanation ul {
      padding-left: 20px;
    }

    .explanation li {
      margin-bottom: 10px;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .tabs-container {
        padding: 10px 0;
      }

      .tab {
        padding: 10px 20px;
        margin: 0 3px 5px;
        font-size: 16px;
      }

      .section {
        padding: 70px 20px;
      }

      .section h2 {
        font-size: 32px;
      }

      .indicator {
        right: 15px;
        padding: 10px 7px;
      }

      .info-bar {
        flex-direction: column;
        gap: 10px;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="tabs-container">
      <button class="tab active" data-target="home"><i class="fas fa-home"></i> 首页</button>
      <button class="tab" data-target="services"><i class="fas fa-cogs"></i> 服务</button>
      <button class="tab" data-target="portfolio"><i class="fas fa-briefcase"></i> 作品集</button>
      <button class="tab" data-target="about"><i class="fas fa-user"></i> 关于我们</button>
      <button class="tab" data-target="contact"><i class="fas fa-envelope"></i> 联系我们</button>
    </div>
  </header>

  <div class="indicator">
    <div class="indicator-dot active" data-target="home" data-title="首页"></div>
    <div class="indicator-dot" data-target="services" data-title="服务"></div>
    <div class="indicator-dot" data-target="portfolio" data-title="作品集"></div>
    <div class="indicator-dot" data-target="about" data-title="关于"></div>
    <div class="indicator-dot" data-target="contact" data-title="联系"></div>
  </div>

  <div class="container">
    <section id="home" class="section">
      <h2><i class="fas fa-home"></i> 欢迎来到我们的网站</h2>
      <p>我们是一家专注于提供高质量数字解决方案的公司。凭借创新的思维和顶尖的技术，我们帮助客户实现业务目标，创造卓越的用户体验。</p>
      <p>无论您是需要网站开发、移动应用还是数字营销策略，我们的专业团队都能为您提供量身定制的解决方案。</p>

      <div class="content-grid">
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>创新设计</h3>
            <p>我们的设计团队专注于创造既美观又实用的用户界面，确保您的产品在视觉和功能上都脱颖而出。</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>前沿技术</h3>
            <p>我们采用最新的技术栈，包括React、Vue、Node.js等，构建高性能、可扩展的应用程序。</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>用户中心</h3>
            <p>一切以用户体验为核心，我们通过深入的用户研究，确保产品真正满足用户需求。</p>
          </div>
        </div>
      </div>
    </section>

    <section id="services" class="section">
      <h2><i class="fas fa-cogs"></i> 我们的服务</h2>
      <p>我们提供全方位的数字服务，从概念设计到开发实施，再到持续维护和优化。</p>

      <div class="content-grid">
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>网站开发</h3>
            <p>响应式网站设计开发，确保在各种设备上都有完美的浏览体验。</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>移动应用</h3>
            <p>iOS和Android平台的原生应用开发，提供流畅的用户体验。</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>UI/UX设计</h3>
            <p>专业的用户界面和用户体验设计，提升产品的用户满意度和参与度。</p>
          </div>
        </div>
      </div>
    </section>

    <section id="portfolio" class="section">
      <h2><i class="fas fa-briefcase"></i> 作品展示</h2>
      <p>探索我们近期完成的项目，这些案例展示了我们在不同行业的专业能力和创新解决方案。</p>

      <div class="content-grid">
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>电商平台</h3>
            <p>为知名零售商打造的全功能电商平台，日均处理订单超过10,000笔。</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>金融应用</h3>
            <p>为银行机构开发的移动银行应用，拥有超过50万活跃用户。</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>教育平台</h3>
            <p>在线学习平台，为教育机构提供完整的课程管理和学习跟踪系统。</p>
          </div>
        </div>
      </div>
    </section>

    <section id="about" class="section">
      <h2><i class="fas fa-user"></i> 关于我们</h2>
      <p>我们成立于2015年，由一群充满激情的技术专家和设计师组成。我们的使命是通过创新技术帮助客户实现业务转型和增长。</p>
      <p>团队由来自不同背景的专业人士组成，包括前端开发、后端开发、UI/UX设计、产品管理和数字营销专家。</p>

      <div class="content-grid">
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>我们的使命</h3>
            <p>通过技术创新帮助客户解决复杂问题，创造卓越的数字体验。</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>核心价值观</h3>
            <p>创新、卓越、诚信、协作和以客户为中心。</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>团队文化</h3>
            <p>开放、包容、学习型组织，鼓励创新思维和持续进步。</p>
          </div>
        </div>
      </div>
    </section>

    <section id="contact" class="section">
      <h2><i class="fas fa-envelope"></i> 联系我们</h2>
      <p>无论您有任何问题或项目需求，请随时与我们联系。我们的团队将尽快回复您的咨询。</p>

      <div class="content-grid">
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>联系信息</h3>
            <p>电话: +86 123 4567 8910</p>
            <p>邮箱: contact@example.com</p>
            <p>地址: 上海市浦东新区张江高科技园区</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>工作时间</h3>
            <p>周一至周五: 9:00 - 18:00</p>
            <p>周六: 10:00 - 16:00</p>
            <p>周日: 休息</p>
          </div>
        </div>
        <div class="card">
          <div class="card-img"></div>
          <div class="card-content">
            <h3>社交媒体</h3>
            <p>微信: ExampleWeChat</p>
            <p>微博: @ExampleWeibo</p>
            <p>LinkedIn: linkedin.com/company/example</p>
          </div>
        </div>
      </div>
    </section>

    <div class="explanation">
      <h3><i class="fas fa-code"></i> 技术实现说明</h3>
      <p>此页面实现了以下功能：</p>
      <ul>
        <li><strong>锚点定位</strong>：点击导航栏标签时，页面平滑滚动到对应区域并更新URL hash</li>
        <li><strong>滚动定位</strong>：页面滚动时自动检测当前位置并激活对应导航标签</li>
        <li><strong>双向同步</strong>：URL hash变化与页面位置保持同步</li>
        <li><strong>指示器功能</strong>：右侧指示器显示当前位置并支持点击导航</li>
        <li><strong>浏览器兼容</strong>：支持前进/后退按钮导航</li>
        <li><strong>响应式设计</strong>：适配各种屏幕尺寸</li>
      </ul>
      <p>核心JavaScript代码使用了事件监听、DOM操作和滚动位置计算等技术。</p>
    </div>
  </div>

  <div class="info-bar">
    <div class="info-item">
      当前URL Hash: <span id="current-hash">#home</span>
    </div>
    <div class="info-item">
      滚动位置: <span id="scroll-position">0</span>px
    </div>
    <div class="info-item">
      激活区域: <span id="active-section">首页</span>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tabs = document.querySelectorAll('.tab');
      const sections = document.querySelectorAll('.section');
      const indicatorDots = document.querySelectorAll('.indicator-dot');
      const navHeight = document.querySelector('header').offsetHeight;
      const currentHash = document.getElementById('current-hash');
      const scrollPosition = document.getElementById('scroll-position');
      const activeSection = document.getElementById('active-section');

      // 更新激活状态
      function updateActiveState(sectionId) {
        // 更新标签激活状态
        tabs.forEach(tab => {
          if (tab.dataset.target === sectionId) {
            tab.classList.add('active');
          } else {
            tab.classList.remove('active');
          }
        });

        // 更新指示器激活状态
        indicatorDots.forEach(dot => {
          if (dot.dataset.target === sectionId) {
            dot.classList.add('active');
          } else {
            dot.classList.remove('active');
          }
        });

        // 更新URL hash显示
        currentHash.textContent = `#${sectionId}`;

        // 更新激活区域名称
        const activeTab = Array.from(tabs).find(tab => tab.dataset.target === sectionId);
        if (activeTab) {
          activeSection.textContent = activeTab.textContent.trim();
        }
      }

      // 滚动到指定区域
      function scrollToSection(sectionId, behavior = 'smooth') {
        const targetSection = document.getElementById(sectionId);
        if (targetSection) {
          window.scrollTo({
            top: targetSection.offsetTop - navHeight,
            behavior: behavior
          });

          // 更新URL hash
          window.location.hash = sectionId;
          updateActiveState(sectionId);
        }
      }

      // 点击标签事件
      tabs.forEach(tab => {
        tab.addEventListener('click', function () {
          const targetId = this.dataset.target;
          scrollToSection(targetId);
        });
      });

      // 点击指示器事件
      indicatorDots.forEach(dot => {
        dot.addEventListener('click', function () {
          const targetId = this.dataset.target;
          scrollToSection(targetId);
        });
      });

      // 滚动事件监听
      let isScrolling = false;
      window.addEventListener('scroll', function () {
        // 更新滚动位置显示
        scrollPosition.textContent = window.scrollY;

        if (!isScrolling) {
          window.requestAnimationFrame(function () {
            const currentScroll = window.scrollY + navHeight;
            let currentSectionId = null;

            // 找出当前所在区域
            sections.forEach(section => {
              const sectionTop = section.offsetTop;
              const sectionBottom = sectionTop + section.offsetHeight;

              if (currentScroll >= sectionTop && currentScroll < sectionBottom) {
                currentSectionId = section.id;
              }
            });

            if (currentSectionId) {
              // 更新激活状态
              updateActiveState(currentSectionId);

              // 更新URL hash
              if (window.location.hash.substring(1) !== currentSectionId) {
                history.replaceState(null, null, `#${currentSectionId}`);
              }
            }

            isScrolling = false;
          });

          isScrolling = true;
        }
      });

      // 监听hash变化（用户直接修改URL或前进后退）
      window.addEventListener('hashchange', function () {
        const hash = window.location.hash.substring(1) || 'home';
        scrollToSection(hash, 'auto');
      });

      // 页面加载时初始化
      const initialHash = window.location.hash.substring(1) || 'home';
      scrollToSection(initialHash, 'auto');
    });
  </script>
</body>

</html>